import  React,{Component} from 'react';
import {HomeWrapper,BackTop} from './style.js';
import Slideshow from './components/Slideshow';
import ListShow from './components/ListShow';
import {connect} from 'react-redux';
import {togoTop} from './store/actionCreators';
import { Icon } from 'antd';
 class Home extends Component{

     handleScrollTop(){
        //     window.scrollTo(0,0);  直接回
    // 先慢后快回顶部
         const langBtn=this.refs.langBtnList.style;
         const scrollToptimer = setInterval(()=> {
             var top = document.body.scrollTop || document.documentElement.scrollTop;
             var speed = top / 4;
             langBtn.display==='block'?langBtn.display='none':langBtn.display='block';
             if (document.body.scrollTop!==0) {
                 document.body.scrollTop -= speed;
             }else {
                 document.documentElement.scrollTop -= speed;}
             if (top === 0) {
                 clearInterval(scrollToptimer);
             }
         }, 30);
     }

    render(){
        return(
            <HomeWrapper>
                <Slideshow></Slideshow>
                <ListShow></ListShow>
                {this.props.showScroll?<BackTop ref='bigLb' onClick={this.handleScrollTop.bind(this)}><Icon type="rocket" style={{fontSize: '3vw'}} /><br/><div  ref='langBtnList'><Icon type="fire" rotate={180} style={{fontSize: '2vw',}}/></div></BackTop>:null}
            </HomeWrapper>
        )
    }
     componentDidMount(){//初始化
         this.bindEvents();
     }
     bindEvents(){//绑定事件
         window.addEventListener('scroll',this.props.changeScrollShow);   //监听滑动
     }
     componentWillUnmount(){
         window.removeEventListener('scroll',this.props.changeScrollShow); //取消监听
     }
}
const mapState=(state)=>({
    showScroll: state.getIn(['home','showScroll'])
});
const mapDispatch=(dispatch)=>({
    changeScrollShow(e){
        if (document.documentElement.scrollTop>100){
            dispatch(togoTop(true));
        }else {
            dispatch(togoTop(false));
        }
    }
})
export default connect(mapState,mapDispatch)(Home);